import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { getCurrentProfile,deleteAccout } from "../../actions/profileActions.js";
import Spinner from "../../common/Spinner.jsx";
import { Link } from "react-router-dom";
import ProfileActives from "./ProfileActives.js";
import Expreience from './Experience'
import Education from './Education';
class Dashboard extends Component {
  componentDidMount() {
    //调用action 请求数据
    this.props.getCurrentProfile();
  }
  onDeleteClick = e => {
    this.props.deleteAccout();
  };

  render() {
    const { user } = this.props.auth;
    const { profile, loading } = this.props.profile;
    let dashboardContent;

    //判断profile是否为空 或者loading是否为真
    if (profile === null || loading) {
      dashboardContent = <Spinner></Spinner>;
    } else {
      //检查对象中是否有数据
      if (Object.keys(profile).length > 0) {
        //有数据
        dashboardContent = (
          <div>
            <p className="lead text-muted">
              Welcome{" "}
              <Link to={`/profile/${profile.handele}`}>{user.name}</Link>
            </p>

            <ProfileActives></ProfileActives>
            <Education education={profile.education} />

            {/* 教育经理and个人履历 */}
          <Expreience experience={profile.experience}></Expreience>

            {/* 删除账户按钮 */}
            <div style={{ marginBottom: "60px" }}>
              <button onClick={this.onDeleteClick} className="btn btn-danger">
                删除当前账户
              </button>
            </div>
          </div>
        );
      } else {
        //用户登录了 但是没信息
        dashboardContent = (
          <div>
            <p className="lead text-muted">欢迎{user.name}</p>
            <p>没有任何个人信息，请添加一些您的个人信息</p>
            <Link className="btn btn-lg btn-info" to="/CreateProfile">
              创建个人信息
            </Link>
          </div>
        );
      }
    }
    return (
      <div className="dashboard">
        <div className="container">
          <div className="row">
            <div className="col-md-12">
              <h1 className="display-4">Dashboard</h1>
              {dashboardContent}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Dashboard.propTypes = {
  getCurrentProfile: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  profile: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  profile: state.profile
});

export default connect(mapStateToProps, { getCurrentProfile,deleteAccout })(Dashboard);
